import React, { Component } from "react";
import { View, Text, Image, StyleSheet, ScrollView } from "react-native";
import  LinearGradient from 'react-native-linear-gradient';
import LogisticsInfo from "./logisticsInfo";

export default class OrderDetail extends Component{
  constructor(props) {
    super(props);
    this.logisticsInfo=null
  }
  openLogisticsInfo(){
    this.logisticsInfo.show()
  }
  render(){
    return(
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        <ScrollView>
          <LinearGradient colors={['#f8da85','#e79c58']} start={{x:0,y:1}} style={styles.header}>
            <View style={styles.headerContainer}>
              <View style={{marginLeft:40}}>
                <Text style={{color:'#fff',fontSize:17,fontWeight:'500'}}>待发货</Text>
                <Text style={{color:'#fff',fontSize:13,marginTop:10}}>等待商家发货</Text>
              </View>
              <Image style={styles.statusIcon} source={require('../../img/order_daishouhuo.png')}></Image>
            </View>
          </LinearGradient>
          <View style={styles.addressBox}>
            <Image style={{width:24,height:24}} source={require('../../img/location.png')}></Image>
            <View style={{marginLeft:15,flex:1}}>
              <Text style={styles.addressName}>张三  18066669666</Text>
              <Text style={styles.address}>北京市西城区西单北大街131号</Text>
            </View>
          </View>
          <View style={styles.info}>
            <Image style={styles.logo} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper2.png'}}></Image>
            <View style={{flex:1,marginLeft:10}}>
              <Text style={{color:'#333333',fontSize:13,lineHeight:20}}>采芝斋江苏苏州特产蛋黄花生 中华老字
                号旗舰店官网江苏特产 蛋黄花生220g</Text>
              <Text style={{color:'#B2B2B2',fontSize:13,marginTop:3}}>x1</Text>
              <Text style={styles.score}>2000积分</Text>
            </View>
          </View>
          <View style={styles.orderInfo}>
            <Text style={styles.orderInfoTitle}>订单信息</Text>
            <Text style={styles.orderInfoItem}>订单编号：262523850121105396</Text>
            <Text style={styles.orderInfoItem}>兑换时间：2021-11-18 17:40:41</Text>
            <Text style={styles.orderInfoItem}>发货时间：2021-11-18 17:40:41</Text>
            <Text style={styles.orderInfoItem}>成交时间：2021-11-18 17:40:41</Text>
          </View>
        </ScrollView>
        <View style={styles.footer}>
          <View style={styles.btn}>
            <Text style={styles.btnTitle} onPress={()=>{this.openLogisticsInfo()}}>查看物流</Text>
          </View>
        </View>
        <LogisticsInfo ref={(ref)=>this.logisticsInfo=ref}></LogisticsInfo>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  header:{
    height:105
  },
  headerContainer:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    flex:1
  },
  statusIcon:{
    width:90,
    height: 45
  },
  addressBox:{
    backgroundColor:'#fff',
    paddingHorizontal:14,
    paddingVertical:25,
    borderRadius:7,
    flexDirection: 'row',
    justifyContent:'flex-start',
    alignItems: 'center',
    marginHorizontal:10,
    marginTop:-15
  },
  addressName:{
    color:'#222222',
    fontSize:14,
    fontWeight:'500'
  },
  address:{
    color:'#222222',
    fontSize:13,
    marginTop: 15
  },
  info:{
    flexDirection:'row',
    justifyContent:"flex-start",
    marginLeft:10,
    marginTop:17,
    paddingBottom:16,
    backgroundColor: '#fff',
    paddingHorizontal:14,
    paddingVertical: 14,
    marginHorizontal:10,
    borderRadius:7
  },
  logo:{
    height: 80,
    width:80,
    borderRadius:3
  },
  score:{
    color:'#000000',
    fontSize:14,
    marginTop:6
  },
  orderInfo:{
    backgroundColor:'#fff',
    marginTop:10,
    paddingHorizontal:14,
    paddingVertical: 14,
    marginHorizontal:10,
    borderRadius:7
  },
  orderInfoTitle:{
    color:'#000000',
    fontSize:14,
    fontWeight:'500',
    marginTop:6,
    marginBottom:20
  },
  orderInfoItem:{
    color:'#444444',
    fontSize:13,
    marginBottom:15
  },
  footer:{
    position:'absolute',
    left:0,
    right:0,
    bottom:0,
    height:83,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'flex-end'
  },
  btn:{
    width:98,
    height:35,
    borderRadius:17.5,
    borderColor:'#E39354',
    borderStyle:'solid',
    borderWidth:1,
    marginTop:7,
    marginRight:15
  },
  btnTitle:{
    color:'#E39354',
    fontSize:13,
    fontWeight:'500',
    lineHeight:35,
    textAlign:'center',
    flex:1
  }
})

